<template>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6" v-for="item in 10">
            <div class="card" style="width: 100%;">
                <img src="http://localhost:3001/static/resources/imgs/photo-20251021-1760983180927.png"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">文章标题</h5>
                    <p class="card-text ellipsis-multiline">
                        文章一部分文本文章一部分文本文章一部分文本文章一部分文本文章一部分文本文章一部分文本
                    </p>
                    <div class="date-time">2025-10-24 12:15:23</div>
                    <div class="d-flex justify-content-between">
                        <router-link class="btn btn-primary btn-sm" to="/detail">点击详情</router-link>
                        <span>作者</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
@import "../assets/varable.less";

.ellipsis {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 溢出部分显示为省略号 */
}
.ellipsis-multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 限制显示的行数为3行 */
    overflow: hidden;
}
.layout {
    font-family: 吉页大字体简;
    font-size: 16px;
    .card {
        margin-bottom: 20px;
    }

    .card-body {
        p {
            width: 100%;
            color: #666;
            font-weight: normal;
        }

        .date-time {
            color: #333;
            margin-bottom: 15px;
        }
    }
}
</style>